<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>

    <!-- 下拉框插件 -->
    <link rel="stylesheet" href="./assets/plugins/select2/select2.min.css" />
     <!-- 引入MUI -->
     <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css" />
    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
    <!-- 引入city样式 -->
    <link rel="stylesheet" href="./assets/plugins/city-picker/city-picker.css">
    <!-- 引入表单验证插件库 -->
    <link rel="stylesheet" href="./assets/plugins/bootstrap-validator/bootstrapValidator.min.css">

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet" href="./assets/css/reset.css" />

    <!-- 公共样式 -->
    <link rel="stylesheet" href="./assets/css/common.css" />

    <!-- 页面独立的 -->
    <link rel="stylesheet" href="./assets/css/ContactAdd.css" />
   
    
</head>
<body>
    <!-- 信息录入 -->
    <div class="info">
        <h3 class="title wow fadeInUp">信息录入</h3>

        <p class="desc wow fadeInUp" data-wow-delay="200ms">
            您可在本页录入您的联系信息，录入成功后名片将会出现在首页。如需修改首页名片信息，也请新建录入，将会自动替换原有名片。
        </p>
    </div>

    <form method="post" id="edit" class="contact wow fadeInUp" data-wow-delay="300ms">
        <div class="form-group">
            <label for="nickname">姓名</label>
            <input type="text" class="form-control" id="nickname" name="nickname" placeholder="请输入姓名" required />
        </div>

        <div class="form-group">
            <label for="mobile">手机</label>
            <input type="text" class="form-control" id="mobile" name="mobile" placeholder="请输入手机号码" required />
        </div>

        <div class="form-group">
            <label for="gender">性别</label>
            <select class="form-control" id="gender" name="gender">
                <option>请选择</option>
                <option value="0">保密</option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        </div>
        <div class="form-group">
            <label for="type">分类</label>
            <select name="typeid" class="form-control" id="typeid">
            </select>
        </div>
        <div class="form-group" style="position: relative;">
            <label for="region">地址</label>
            <input type="text" class="form-control" id="region" placeholder="请选择地址" readonly />
        </div>

        <div class="form-group">
            <label for="remark">备注信息</label>
            <input type="text" class="form-control" id="remark" name="remark" placeholder="请输入备注" />
        </div>
        
        <div class="action">
            <button class="btn">提交</button>
        </div>
    </form>
</body>
</html>
<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>
<!-- 引入mui的js文件 -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- 下拉框插件 -->
<script src="./assets/plugins/select2/select2.min.js"></script>
<!-- 引入city的js文件 -->
<script src="./assets/plugins/city-picker/city-picker.data.min.js"></script>
<script src="./assets/plugins/city-picker/city-picker.min.js"></script>
<!-- 引入表单插件库 -->
<script src="./assets/plugins/bootstrap-validator/bootstrapValidator.min.js"></script>



<!-- 引入请求封装库 -->
<script src="./assets/plugins/axios/axios.min.js"></script>
<script src="./assets/plugins/axios/request.js"></script>
<!-- 引入cookie文件 -->
<script src="./assets/plugins/cookie.js"></script>
<!-- 引入自己的函数库 -->
<script src="./assets/plugins/helpers.js"></script>
<!-- 引入login异常登录文件 -->
<script src="./assets/plugins/login.js"></script>

<script>
    //实例化wow.js
    new WOW().init()

    var business = cookie.get('business')?cookie.get('business'):"{}";
    business = JSON.parse(business);//获取data对象
    // 获取传递过来的cardid 通过函数库中的方法返回参数值
    var cardid = GetParams('cardid')?GetParams('cardid'):0;
    var region = card = null;
    // 初始化地址
    // $('#region').citypicker({});
    //使用立即执行函数获取下拉菜单
    (async function(){
        var html = '';
        var result = await POST({
            url:'card/card/type',
        })
        var val = result.data;
        if(result.code==1){
            for(var item of val ){
                html += `<option value="${item['id']}">${item['name']}</option>`;
            }
        }
        $("#typeid").html(html)
    })();
    // 使用立即执行函数 进行点击页面初始化
    (async function(){
        var result = await POST({url:"card/card/check",
            params:{busid:business.id,cardid:cardid}
        })
       
        if(result.code){
            card = result.data;
            console.log(card.province_text)

            $("#nickname").val(card.nickname);
            $("#mobile").val(card.mobile);
            $("#gender").val(card.gender);
            
            $("#typeid").val(card.typeid);
            $("#remark").val(card.remark);
            if(card.region_text){
                $('#region').citypicker({
                    province:card.province_text,
                    city:card.city_text,
                    district:card.district_text
                }); 
            }else{
                $('#region').citypicker({}); 
            }  
        }else{
            mui.toast(result.msg,{duration:1000});
            setTimeout(()=>{
                history.go(-1);
            },1000)
            return false
        }
    })();




    //获取地区的地址码 当城市信息发生改变时出发点的事件
    $("#region").on('cp:updated',function(){
        var citypicker = $(this).data('citypicker');

        //获取变化的地址码 district 获取区级地址吗 province 省级 city 市
        region = citypicker.getCode('district') || citypicker.getCode('city') || citypicker.getCode('province')
    })

    
    //初始化表单验证方法
    $('#edit').bootstrapValidator({
        // 所有字段的默认错误消息
        message: '表单内容不能为空',
        //字段校验图标。默认bootstrap图标
        feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
        },
        //验证字段
        fields: {
            nickname: {
                message: '昵称验证失败',
                validators: {
                    notEmpty: {
                        message: '昵称不能为空'
                    },
                    stringLength: {
                        min: 3,
                        max: 18,
                        message: '昵称长度必须在3到18位之间'
                    },
                }
            },
            mobile: {
                message: '手机号码验证失败',
                validators: {
                    notEmpty: {
                        message: '手机号码不能为空'
                    },
                    regexp: { //正则校验
                        regexp: /^1[3-9]\d{9}/, 
                        message:'手机号码格式不正确!'
                    },
                }
            },
        },
    }).on('init.form.bv',function(e){
        e.preventDefault();
    });
    


    //提交表单
    $("#edit").submit(async function(e){
        e.preventDefault();
        // 封装数据
        var params = {
            cardid:cardid,
            busid:business.id,
            nickname:$.trim($("#nickname").val()),
            mobile:$.trim($("#mobile").val()),
            gender:$.trim($("#gender").val()),
            typeid:$.trim($("#typeid").val()),
            remark:$.trim($("#remark").val()),
        }
        //如果获取地址码 就添加进去
        if(region){
            params.region = region;
        }
        //发起同步
        var result = await POST({url:"card/card/edit",params})
        if(result.code){
            mui.toast(result.msg);
            console.log(result.msg)
            setTimeout(()=>{
                // location.href = "index.html";
                history.go(-1);
            },2000)
            return false;
        }else{
            alert(result.msg);
            return false;
        }
    })
    // $('#gender').select2();
    // $('#typeid').select2();
    // $('#region').select2();
    
</script>